<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(0)">全部</el-button>
      <el-button @click="changeStatus(5)">已付款</el-button>
      <el-button @click="changeStatus(10)">已核销</el-button>
      <!-- <el-button  @click="changeStatus(15)">已取消</el-button>
      <el-button  @click="changeStatus(20)">已失效</el-button>-->
    </el-button-group>

    <div class="search">
      <div class="search_btn">
        <el-input class="input" v-model="form.order_no" placeholder="输入订单号搜索" clearable></el-input>
        <el-button type="primary" @click="searchvouchlist">搜索</el-button>
      </div>
    </div>

    <div class="search">
      <el-input class="input" v-model="form.username" placeholder="输入账号搜索" clearable></el-input>
      <!-- <el-button type="primary" @click="searchvouchlist">搜索</el-button> -->
    </div>

    <el-table
    class="coupon_table"
      :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="order_no" label="订单号" width='120'></el-table-column>

      <el-table-column prop="title" width='120' label="现金券名称" ></el-table-column>
      <el-table-column prop="shop_name" width='130' label="所属小店" ></el-table-column>
      <el-table-column prop="username" width='120' label="下单用户" ></el-table-column>
      <el-table-column prop="price" label="单价" ></el-table-column>
      <el-table-column prop="rebate_money_yuan" label="返红包数" ></el-table-column>
      <el-table-column prop="quantity" label="购买数量" ></el-table-column>
      <el-table-column prop="actual_amount" label="支付价格" ></el-table-column>
      <el-table-column label="创建时间" width='160' prop="created_at" ></el-table-column>
      <el-table-column label="核销时间(最后一次)">
        <template slot-scope="scope">
          <p v-if="scope.row.order_verify_created_at">{{scope.row.order_verify_created_at}}</p>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column prop="order_status" label="状态" >
        <template slot-scope="scope">
          <p v-if="scope.row.order_status==1">待支付</p>
          <p v-if="scope.row.order_status==5">已支付</p>
          <p v-if="scope.row.order_status==10">已核销</p>
          <p v-if="scope.row.order_status==15">已取消</p>
          <p v-if="scope.row.order_status==20">已失效</p>
        </template>
      </el-table-column>
    </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { cashcouponorderList } from "@/api/managent";
export default {
  data() {
    return {
      form: {
        order_status: "",
        order_no: "",
        username: "",
        page:1,
        shop_id:"",
      },
      tableData: [],
      total:0,
    };
  },
  mounted() {
    this.form.shop_id = this.$route.query.shop_id
    if(!this.form.shop_id){
      this.form.shop_id = ''
    }
    this.getCashCouponOrderData();
  },
  methods: {
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
     pageChange(page) {
      this.form.page = page;
      this.getCashCouponOrderData();
    },
    changeStatus(e) {
      if (e === 0) {
        this.form.order_status = "";
      } else {
        this.form.order_status = e;
      }

      //重新获取现金券订单列表

      this.getCashCouponOrderData();
    },

    //获取现金券订单列表
    async getCashCouponOrderData() {
      var url =
        "order_status=" +
        this.form.order_status +
        "&order_no=" +
        this.form.order_no +
        "&username=" +
        this.form.username+
        "&shop_id=" + this.form.shop_id+
        "&page=" +
        this.form.page;
      let res = await cashcouponorderList(url);
      console.log(res)
      this.tableData = res.data.data;
      this.total =  res.data.total
    },

    //根据关键词重新获取小店
    searchvouchlist() {
      this.getCashCouponOrderData();
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    margin-left: 15px;
    .input {
      width: 200px;
    }
  }
  .coupon_table{
    margin-top: 20px;
  }
  .shop_title {
    font-weight: 700;
  }
  .pagination{
    float: right;
  }
}
</style>